<template>
  <div class="container">
    <el-card>
      <div class="Ntitle">
        <span>试题录入</span>
      </div>
      <el-form ref="form" :model="qsForm" label-width="120px" class="tyl">
        <!-- 学科 -->
        <el-form-item label="学科:" prop="subjectID">
          <el-select @change="changeSubject" v-model="qsForm.subjectID" style="width:400px">
            <el-option
              v-for="item in subjectOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <!-- 目录 -->
        <el-form-item label="目录:">
          <el-select placeholder="请选择目录" style="width:400px"></el-select>
        </el-form-item>
        <el-form-item label="企业:">
          <el-select placeholder="请选择企业" style="width:400px"></el-select>
        </el-form-item>
        <el-form-item label="城市:">
          <el-select multiple placeholder="请选择城市" style="width:198px"></el-select>
          <el-select
            multiple
            collapse-tags
            style="margin-left: 4px; width: 198px;"
            placeholder="请选择"
          ></el-select>
        </el-form-item>
        <el-form-item label="方向:">
          <el-select placeholder="请选择" style="width:400px"></el-select>
        </el-form-item>
        <el-form-item label="题型:">
          <el-radio v-model="radio" label="1">单选</el-radio>
          <el-radio v-model="radio" label="2">多选</el-radio>
          <el-radio v-model="radio" label="3">简答</el-radio>
        </el-form-item>
        <el-form-item label="难度:">
          <el-radio v-model="radio" label="1">简单</el-radio>
          <el-radio v-model="radio" label="2">一般</el-radio>
          <el-radio v-model="radio" label="3">困难</el-radio>
        </el-form-item>
        <el-form-item label="题干:" prop="question">
          <quill-editor
            v-model="form.question"
            ref="myQuillEditor"
            :options="editorOption"
            class="editor"
          />
        </el-form-item>
        <el-form-item label="选择:" prop="question">
          <el-form-item>
            <el-button
              type="danger"
              :disabled="form.questionType==='1'"
              @click="addOptions"
            >+增加选项与答案</el-button>
          </el-form-item>
        </el-form-item>
        <el-form-item label="解析视频:">
          <el-input></el-input>
        </el-form-item>
        <el-form-item label="答案解析:" prop="question">
          <quill-editor
            v-model="form.question"
            ref="myQuillEditor"
            :options="editorOption"
            class="editor"
          />
        </el-form-item>
        <el-form-item label="活动形式" prop="desc">
          <el-input type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="解析视频:">
          <el-select placeholder="请选择" style="width:400px"></el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { simple as getSubjectOptions } from '@/api/hmmm/subjects'
import { simple as getCatalogOptions } from '@/api/hmmm/directorys'
import { simple as getTagOptions } from '@/api/hmmm/tags'
import { list as getCompanyOptions } from '@/api/hmmm/companys'
import { provinces as getCityOptions, citys as getAreaOptions } from '@/api/hmmm/citys'
import { direction, questionType, difficulty } from '@/api/hmmm/constants'
import { add, detail, update } from '@/api/hmmm/questions'
const toolbarOptions = [
  // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
  ['bold', 'italic', 'underline', 'strike'],
  // 引用  代码块-----['blockquote', 'code-block']
  ['blockquote', 'code-block'],
  // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
  [{ list: 'ordered' }, { list: 'bullet' }],
  // 清除文本格式-----['clean']
  ['clean'],
  // 链接、图片、视频-----['link', 'image', 'video']
  ['image', 'video', 'link']
]
export default {

  data () {
    return {
      content: '<h2>I am Example</h2>',
      editorOption: {
        modules: {
          toolbar: {
            container: toolbarOptions
          }
        }
      },
      // 试题对象
      qsForm: {
        subjectID: null,
        catalogID: null,
        enterpriseID: null,
        // 城市
        province: null,
        // 地区
        city: null,
        // 方向
        direction: null,
        // 题型
        questionType: '1',
        // 难度
        difficulty: '1',
        // 题干
        question: null,
        // 选项
        options: [
          { isRight: false, code: 'A', title: '', img: '' },
          { isRight: false, code: 'B', title: '', img: '' },
          { isRight: false, code: 'C', title: '', img: '' },
          { isRight: false, code: 'D', title: '', img: '' }
        ]
      },
      // 校验规则
      qsRules: {
        subjectID: [
          { required: true, message: '请选择学科', trigger: 'change' }
        ],
        catalogID: [
          { required: true, message: '请选择目录', trigger: 'change' }
        ],
        enterpriseID: [
          { required: true, message: '请选择企业', trigger: 'change' }
        ],
        city: [
          { required: true, message: '请选择地区', trigger: 'change' }
        ],
        direction: [
          { required: true, message: '请选择方向', trigger: 'change' }
        ],
        questionType: [
          { required: true, message: '请选择题型', trigger: 'change' }
        ],
        difficulty: [
          { required: true, message: '请选择难度', trigger: 'change' }
        ],
        question: [
          { required: true, message: '请输入题干', trigger: 'blur' }
        ]
      }
    }
  },
  components: {
    quillEditor
  },
  methods: {
    onSubmit () {
      console.log('submit!')
    },
    async changeSubject (subjectID) {
      this.qsForm.catalogID = null
      const zlm = await getCatalogOptions({ subjectID: this.qsForm.subjectID })
      this.catalogOptions = zlm.data
      this.qsForm.tags = null
      const zlm2 = await getTagOptions({ subjectID: this.qsForm.subjectID })
      this.catalogOptions = zlm2.data
    }
  }
}
</script>

<style scoped lang='less'>
.editor {
  height: 200px;
  margin-bottom: 50px;
}
.el-select {
  width: 400px;
}
.provincecity {
  .el-select {
    width: 200px;
  }
}
.container {
  padding: 20px;
  .tyl {
    margin-top: 20px;
  }
}
</style>
